<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第三次作业</title>
        <link rel="stylesheet" href="1.css">
       
    </head>
    <body>
    <header>
        <div id="side-menu">
            <div id="side-menu-inner">
                this is menu content
            </div>
        </div>
        <h2>读书日记</h2>
        <nav class="a1">
             <li class="father">八月长安
                 <ul class="son">
                     <li><a href="https://baike.baidu.com/link?url=Di9_e1i6gAJP1MLwj2crmYK7s9jwdqioNcUTTKYM5Rj3qzzRajBZzbFM4sVzlNH6RvmRLvvtrzNHhQpVAQ8cJZ2mHcuSyiuMfaVC5aenaMnCHjBqqY5UqFej0baVe60l-fngdsZcv7bRGyJbpAq9d_">个人简介</a></li>
                     <li><a href="https://www.weibo.com/bayuechangan">她的微博</a></li>
                     <li><a href="">有关文章</a></li>
                 </ul>
             </li>
             <li class="father">振 华 三 部 曲
                 <ul class="son">
                     <li><a href="https://www.iqiyi.com/v_19rrdu8le0.html?vfm=2008_aldbd&fv=p_02_01">你好，旧时光</a></li>
                     <li><a href="https://www.iqiyi.com/v_19rrkyywoo.html?vfm=2008_aldbd&fv=p_02_01">最好的我们</a></li>
                     <li><a href="https://www.mgtv.com/b/329971/10902813.html?cxid=95kqkw8n6">暗恋橘生淮南</a></li>
                 </ul>
             </li>
             <li class="father">danmei小说
                 <ul class="son">
                     <li><a herf="https://www.zhhbiqu.com/17627_17627535/">撒野</a></li>
                     <li><a href="https://baike.baidu.com/item/%E7%A0%B4%E4%BA%91/23299465?fr=aladdin">破云</a></li>
                     <li><a href="https://baike.baidu.com/item/%E4%BC%AA%E8%A3%85%E5%AD%A6%E6%B8%A3/23480921?fr=aladdin">伪装学渣</a></li>
                 </ul>
             </li>
             <li class="father"> 一些杂文小说经典 
                 <ul class="son">
                     <li><a herf="https://baike.baidu.com/item/%E7%BA%A2%E6%A5%BC%E6%A2%A6/15311?fr=aladdin">红楼梦</a></li>
                     <li><a herf="https://baike.baidu.com/item/%E5%B9%B3%E5%87%A1%E7%9A%84%E4%B8%96%E7%95%8C/166?fromModule=lemma_search-box">平凡的世界</a></li>
                     <li><a herf="https://baike.baidu.com/item/%E7%BB%BF%E5%B1%B1%E5%A2%99%E7%9A%84%E5%AE%89%E5%A6%AE/7547701">绿山墙的安妮及安妮系列</a></li>
                 </ul>
             </li>
         </nav>   
    </header>
    <main>
        <audio src="CMJ - 撒野（纯音乐）.mp3" controls="controls">BGM</audio>
        <br>
        <ul class="c1">
            <li>
                <img src="你好旧时光1.jpg">
                <div class="mask">
                    <h1>你好，旧时光</h1>
                    <p>小太阳林杨和余周周大侠</p>
                </div> 
            </li>
            <li>
                <img src="最好的我们1.jpg">
                <div class="mask">
                    <h1>最好的我们</h1>
                    <p>余淮小爷和耿耿小可爱</p>
                </div> 
            </li>
            <li>
                <img src="破云1.jpg">
                <div class="mask">
                    <h1>破云</h1>
                    <p>红心Q和他的小娇妻</p>
                </div> 
            </li>
            <li>
                <img src="撒野1.jpg">
                <div class="mask">
                    <h1>撒野</h1>
                    <p>猫丞丞兔飞飞</p>
                </div> 
            </li>
            <li>
                <img src="林黛玉.jpg">
                <div class="mask">
                    <h1>林黛玉</h1>
                    <p>花谢花飞飞满天,红消香断有谁怜?</p>
                </div> 
            </li>
            <li>
                <img src="薛宝钗.jpg">
                <div class="mask">
                    <h1>薛宝钗</h1>
                    <p>好风凭借力,送我上青云!</p>
                </div> 
            </li>
        </ul>
    </main>
    </body>
    <footer>
        <h1>能力有限!下次一定做更好点！</h1>
    </footer>
    
</html>
